<template>
  <div class="system-role-container layout-padding">
    <div class="system-role-padding layout-padding-auto layout-padding-view">
      <div class="system-user-search mb10 flex">
        <div class="flex align-center">
          <el-button :icon="Filter" circle @click="onFilterCollapse" />
          <span class="ml10">{{ $t(String(route.meta.title)) }}</span>
        </div>
        <el-button type="success" class="ml-auto" @click="onOpenAddRole('add')">
          <el-icon>
            <ele-FolderAdd />
          </el-icon>
          {{ add }}
        </el-button>
      </div>
      <div class="flex" style="height: 100%">
        <el-card shadow="never" class="mr15" v-if="isFilterCollapse">
          <el-input v-model="state.tableData.param.search" :placeholder="placeholder" style="max-width: 180px"></el-input>
          <el-button type="primary" class="mt10">
            <el-icon>
              <ele-Search />
            </el-icon>
            查询
          </el-button>
        </el-card>
        <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
          <template v-for="(column, index) in state.tableData.columns">
            <el-table-column :key="index" v-if="column.type === 'action'" :label="column.label"
              :width="column.width || 'auto'">
              <template #default="scope">
                <el-button v-for="item in column.actions" :key="item" size="small" text type="primary"
                  @click="item !== '删除' ? onOpenEditRole('edit', scope.row) : onRowDel(scope.row)">
                  {{ item }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column :key="`_${index}`" v-else-if="column.type" :type="column.type" :label="column.label"
              :width="column.width || 'auto'">
            </el-table-column>
            <el-table-column :key="`__${index}`" v-else :prop="column.prop" :label="column.label"
              :width="column.width || 'auto'">
            </el-table-column>
          </template>
        </el-table>
      </div>
      <el-pagination :small="themeConfig.globalComponentSize === 'small'" @size-change="onHandleSizeChange"
        @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[10, 20, 30]"
        v-model:current-page="state.tableData.param.pageNum" background v-model:page-size="state.tableData.param.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
      </el-pagination>
    </div>
    <RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
  </div>
</template>

<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import type { TableColumnCtx } from 'element-plus'
import { useThemeConfig } from '@/stores/themeConfig'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'
import { Filter } from '@element-plus/icons-vue'
import request from '@/utils/request'

// 引入组件
const RoleDialog = defineAsyncComponent(() => import('@/views/system/role/RoleDialog.vue'))

// 主题配置
const storesThemeConfig = useThemeConfig()
const { themeConfig } = storeToRefs(storesThemeConfig)
const route = useRoute()

interface User { }

interface TableColumn extends TableColumnCtx<User> {
  actions: string[]
}

interface TableProps<T = any> {
  tableData: {
    columns: TableColumn[]
    data: T
    total: number
    loading: boolean
    param: {
      search: string
      pageNum: number
      pageSize: number
    }
  }
}

// 定义变量内容
const roleDialogRef = ref()
const state = reactive<TableProps>({
  tableData: {
    columns: [],
    data: [],
    total: 0,
    loading: false,
    param: {
      search: '',
      pageNum: 1,
      pageSize: 10
    }
  }
})
const isFilterCollapse = ref(false)
const add = ref<any>('新增')
const placeholder = ref('请输入')
const title = ref('')
/**
 * 筛选显示隐藏
 */
const onFilterCollapse = () => {
  isFilterCollapse.value = !isFilterCollapse.value
}
// 初始化表格数据
const getTableData = () => {
  state.tableData.loading = true
  const sp = route.path.split('/')
  const name = sp[sp.length - 1]
  title.value = sp[sp.length - 1]
  request.get(`/JSON/${String(name)}.json`).then((res) => {
    window.console.log(res)
    state.tableData.columns = res.columns
    state.tableData.data = res.data
    add.value = res.add
    placeholder.value = res.placeholder
    state.tableData.total = state.tableData.data.length
    state.tableData.loading = false
  })
}
// 打开新增角色弹窗
const onOpenAddRole = (type: string) => {
  roleDialogRef.value.openDialog(type)
}
// 打开修改角色弹窗
const onOpenEditRole = (type: string, row: Object) => {
  roleDialogRef.value.openDialog(type, row)
}
// 删除角色
const onRowDel = (row: RowRoleType) => {
  ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      getTableData()
      ElMessage.success('删除成功')
    })
    .catch(() => { })
}
// 分页改变
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val
  getTableData()
}
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val
  getTableData()
}
// 页面加载时
onMounted(() => {
  getTableData()
})
</script>

<style scoped>
.system-role-container {
  .system-role-padding {
    padding: 15px;

    .el-table {
      flex: 1;
    }
  }
}
</style>
